<template>
  <div style="display: flex">
    <!-- 会议数据 -->
    <div>
      <div style="font-size: 24px; color: #000000">会议统计</div>
      <div>
        <div id="reservation" style="width: 680px; height: 350px"></div>
      </div>
    </div>

    <!--  用户、评价、反馈数据-->
    <div>
      <div style="font-size: 24px; color: #000000; margin-bottom: 20px">内容统计</div>
      <div id="threeData" style="width: 680px; height: 345px"></div>
    </div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
onMounted(() => {
  initReservation();
  initThreeData();
});

// 用户数据展示
function initReservation() {
  var option = {
    xAxis: {
      type: "category",
      data: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [
          120,
          200,
          150,
          80,
          70,
          110,
          130,
        ],
        type: "bar",
      },
    ],
  };
  var myChart = echarts.init(document.getElementById("reservation"));
  myChart.setOption(option);
  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}

//其他全部数据展示
function initThreeData() {
  var option = {
    title: {
      text: "其他内容",
      subtext: "实时数据",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "数据来源",
        type: "pie",
        radius: "50%",
        data: [
          { value: 1048, name: "部门" },
          { value: 735, name: "公告" },
          { value: 580, name: "通知" },
          { value: 484, name: "签到" },
          { value: 300, name: "会议室" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  var myChart = echarts.init(document.getElementById("threeData"));
  myChart.setOption(option);
  //随着屏幕大小调节图表
  window.addEventListener("resize", () => {
    myChart.resize();
  });
}
</script>

<style scoped>
</style>